<template>
	<view v-if="songList.length !=0" class="song-list">
		<view class="song-list-head">
			<text class="iconfont icon-icon_bofang"></text>
			<text>播放全部</text>
			<text>(共{{songList.length}}首)</text>
		</view>
	
		<view @tap="goToDetail(item.id)" class="song-list-item" v-for="(item, index) in songList" :key="index">
			<view class="number">{{index+1}}</view>
			<view class="song-info">
				<view>{{item.name}}</view>
				<view >
					<image v-if="item.copyright == 1" src="../../static/dujia.png"></image>
					<!-- #ifdef MP-WEIXIN  -->
					<image  v-if="item.h['size']>9000000" src="../../static/sq.png"></image>
					<!-- #endif -->
					<text>{{item.ar[0].name}}-{{item.name}}</text>
				</view>
			</view>
			<view class="play">
				<text class="iconfont icon-icon_bofang"></text>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		name:"songlist",
		data() {
			return {
				
			};
		},
		props:{
			songList: {
				type: Array,
				default: []
			}
		},
		methods: {
			goToDetail(id) {
				//uni.reLaunch之后之前页面栈会销毁
				uni.navigateTo  ({
					url: '../../songdetail/songdetail?songId='+id
				})
			}
		}
	}
</script>

<style scoped>
	.song-list {
		width: 100%;
		background-color: #fff;
		border-radius: 15px 15px 0 0;
		
	}
	.song-list-head {
		width: 100%;
		height: 40px;
		line-height: 40px;
	}
	.song-list-head text:nth-child(1) {font-size: 18px; padding: 0 10px;}
	.song-list-head text:nth-child(2) { font-size: 14px; }
	.song-list-head text:nth-child(3) { font-size: 12px; color: rgba(0,0,0,.3)}
	.song-list-item {
		display: flex;
		height: 50px;
		margin: 10px;
	}
	.song-list-item .play,
	.song-list-item .number {
		margin: 0 10px;
		margin-left: -3px;
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 12px;
		color: rgba(0,0,0,.3)
		
	}
	.song-list-item .play {
		margin-right: 0px;
	}
	.song-list-item .play text{
		font-size: 24px;
		padding:0;
	}
	.song-list-item .song-info {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 400px;
		text-align: left;
		padding: 5px 0;
		white-space: nowrap;
		overflow: hidden;
		font-weight: 300;
		
	}
	.song-list-item .song-info .number {
		font-size: 32rpx;
	}
	.song-list-item .song-info view:nth-child(1) {
		font-size: 30rpx;
		
	}
	.song-list-item .song-info view:nth-child(2) {
		font-size: 22rpx;
		color: rgba(0,0,0,.3)
	}
	
	.song-list-item .song-info image{
		width: 30rpx;
		height: 10px;
		margin-right: 3px;
	}
	.song-list {
		height: 100%;
	}
</style>
